<template>
	<view class="echart">
		<div ref="bar3"></div>
	</view>
</template>

<script>
export default {
  props:['chartData'],
  data() {
    return {}
  },
  mounted() {
    this.getChartData();
  },
  methods: {
    getChartData() {
      const datalist = this.chartData;
      let option = {
        color:['#54A2FA', '#E6585A', '#EE9D56', '#17D7B0'],
        tooltip: {
          trigger: "item",
          textStyle: {
            color: "#000",
            fontSize: 12,
          },
          backgroundColor: "rgba(255, 255, 255, .92)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          // formatter: function (params) {
          //   return `${params.name}:${params.percent}%`
          // },
        },
        title: {
          text: '金额占比',
          left: 42,
          top: 90,
          textStyle: {
            fontSize: 12,
            color: '#666666',
            align: 'center'
          }
        },
        legend: {
          top: 'center',
          right: '7%',
          itemHeight: 12,
          itemWidth: 12,
          width: 20,
          padding: [50, 20, 20],
          textStyle: {
            rich: {
              one: {
                width: 80,
                height: 30,
                color: '#666666',
                fontSize: 12,
                fontWeight: 400,
              },
              two: {
                width: 60,
                height: 30,
                color: '#333333',
                fontSize: 13,
                fontWeight: 700,
              },
            },
          },
          formatter: (name) => {
            var target;
            for (var i = 0; i < datalist.length; i++) {
              if (datalist[i].name == name) {
                target = datalist[i].value;
              }
            }
            return `{one|${name}} {two|${target}%}`;
          },
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: '../../assets/echarts/jine.png',
                width: 30.5,
                height: 34,
                zIndex: 2,
                top: "center"
              },
              left: '55',
              top: '55',
            }
          ],
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '65%'],
            center: ['20%', '50%'],
            clockwise: true,
            zIndex: 4,
            avoidLabelOverlap: true,
            label: {show: false},
            labelLine: {show: false},
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: '#fff',
              }
            },
            data: datalist,
          }
        ]
      }
      this.$refs.bar3.init(this.$echarts, chart => {
        chart.setOption(option);
      });
    }
  }
}
</script>

<style scoped>
.echart{
  width: 100%;
  height: 100%;
}
</style>
